import {messages} from "share/common";
import React,{Component} from 'react';
import {connect} from 'react-redux';
import {Button, Radio, InputNumber, Spin} from 'antd';
import 'styles/expense-reimbursement-control/buffer-set/buffer-set.scss'
import BufferServer from './buffer-server';
import {message} from "antd/lib/index";

const RadioGroup = Radio.Group;

class BufferSet extends Component{

  constructor(props){
    super(props);
    this.state = {
      loading: false,
      hotelBuffer: {},// 酒店
      planeBuffer: {}, // 机票
      internalNumber: 0,// 国内机票
      international: 0,// 国外机票
      internalHotel: 0,// 国内酒店
      internationalHotel: 0,// 国外酒店
    };
  }

  componentWillMount(){
    this.initData();
  }

  initData = () => {
    BufferServer(this).getBufferData({companyOid: this.props.company.companyOID}).then(res => {
      const {hotelBuffer, flightBuffer} = res.data.body;
      this.setState({
        hotelBuffer: hotelBuffer,
        planeBuffer: flightBuffer,
        internalNumber: flightBuffer.orderMaxValue,
        international: flightBuffer.internationalOrderMaxValue,
        internalHotel: hotelBuffer.orderMaxValue,
        internationalHotel: hotelBuffer.internationalOrderMaxValue,
      });
    })
  }

  onSaveSetting = () => {
    const {internalNumber, international, internationalHotel, internalHotel, planeBuffer, hotelBuffer} = this.state;
    planeBuffer.orderMaxValue = internalNumber;
    planeBuffer.internationalOrderMaxValue = international;
    hotelBuffer.orderMaxValue = internalHotel;
    hotelBuffer.internationalOrderMaxValue = internationalHotel;

    const params = Object.assign(
      {companyOid: this.props.company.companyOID},
      {flightBuffer: planeBuffer},
      {hotelBuffer: hotelBuffer});

    BufferServer(this).saveBufferData(params).then(res => {
      if(res.data.success){
        this.initData();
        message.success(messages('expense-reimbursement-control.key76')/*保存成功*/);
      }else{
        message.error(res.data.message);
      }
    })

  }

  onInputNumberChange = (value, type) => {
    switch (type){
      case 'internalPlane':
        this.setState({internalNumber: value});
        break;
      case 'internationalPlane':
        this.setState({international: value});
        break;
      case 'internalHotel':
        this.setState({internalHotel: value});
        break;
      case 'internationalHotel':
        this.setState({internationalHotel: value});
        break;
      case 'plane_cn_orderBufferType':// 国内机票
        this.resetBufferState('plane','orderBufferType',value.target.value);
        break;
      case 'plane_en_internationalOrderBufferType':// 国际机票
        this.resetBufferState('plane','internationalOrderBufferType',value.target.value);
        break;
      case 'hotel_cn_orderBufferType': // 国内酒店
        this.resetBufferState('hotel','orderBufferType',value.target.value);
        break;
      case 'hotel_en_internationalOrderBufferType': // 国际酒店
        this.resetBufferState('hotel','internationalOrderBufferType',value.target.value);
        break;
      default:
        break;
    }
  }

  resetBufferState = (type, name, value) => {
    const {hotelBuffer, planeBuffer} = this.state;
    switch (type){
      case 'hotel':
        hotelBuffer[name] = value;
        break;
      case 'plane':
        planeBuffer[name] = value;
        break;
      default: break;
    }
    this.setState({
      hotelBuffer,
      planeBuffer
    })
  }

  formatter = (value, isScale) => {
    return  isScale === 1 ? `${value}%` : `CNY ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  }
  parser = (value, isScale) => {
    return  isScale === 1 ? value.replace('%', '') : value.replace(/\CNY\s?|(,*)/g, '');
  }

  render(){
    const {loading, hotelBuffer, planeBuffer, internalHotel, internalNumber, international, internationalHotel} = this.state;
    return (
      <div className='buffer-set'>
        <Spin spinning={loading}>
          <h2>___机票浮动标准___</h2>
          <a className='a-line-bottom'>___可设置机票的最大浮动标准，国内机票比例以经济舱全价为标准___</a>
          <div className='div-margin-bottom'>
            <span>___国内机票单张订单最大浮动___：</span>
            <RadioGroup
              onChange={(value) => this.onInputNumberChange(value, 'plane_cn_orderBufferType')}
              value={planeBuffer.orderBufferType || 1}
            >
              <Radio value={1}>___按比例___</Radio>
              <Radio value={2}>___固定金额___</Radio>
            </RadioGroup>
            <InputNumber
              style={{width: 160}}
              value={internalNumber}
              formatter={value => this.formatter(value, planeBuffer.orderBufferType)}
              parser={value => this.parser(value, planeBuffer.orderBufferType)}
              onChange={(value) => this.onInputNumberChange(value, 'internalPlane')}
            />
          </div>
          <div className='div-margin-bottom'>
            <span>___国际机票单张订单最大浮动___：</span>
            <RadioGroup
              onChange={(value) => this.onInputNumberChange(value, 'plane_en_internationalOrderBufferType')}
              value={planeBuffer.internationalOrderBufferType || 1}
            >
              <Radio value={1}>___按比例___</Radio>
              <Radio value={2}>___固定金额___</Radio>
            </RadioGroup>
            <InputNumber
              style={{width: 160}}
              value={international}
              formatter={value => this.formatter(value, planeBuffer.internationalOrderBufferType)}
              parser={value => this.parser(value, planeBuffer.internationalOrderBufferType)}
              onChange={(value) => this.onInputNumberChange(value, 'internationalPlane')}
            />
          </div>
          <div className='div-margin-bottom'>
            <span>___提前审批模式同一申请单内订单下单时控制方式___：</span>
            <RadioGroup value={1}>
              <Radio value={1}>___按每张订单总浮动控制___</Radio>
            </RadioGroup>
          </div>
          <br/><br/>
          <h2>___酒店浮动标准___</h2>
          <a className='a-line-bottom'>___可设置酒店的最大浮动标准___</a>
          <div className='div-margin-bottom'>
            <span>___国内酒店单张订单最大浮动___：</span>
            <RadioGroup
              onChange={(value) => this.onInputNumberChange(value, 'hotel_cn_orderBufferType')}
              value={hotelBuffer.orderBufferType}
            >
              <Radio value={1}>___按比例___</Radio>
              <Radio value={2}>___固定金额___</Radio>
            </RadioGroup>
            <InputNumber
              style={{width: 160}}
              value={internalHotel}
              formatter={value => this.formatter(value, hotelBuffer.orderBufferType)}
              parser={value => this.parser(value, hotelBuffer.orderBufferType)}
              onChange={(value) => this.onInputNumberChange(value, 'internalHotel')}
            />
          </div>
          <div className='div-margin-bottom'>
            <span>___国际酒店单张订单最大浮动___：</span>
            <RadioGroup
              onChange={(value) => this.onInputNumberChange(value, 'hotel_en_internationalOrderBufferType')}
              value={hotelBuffer.internationalOrderBufferType}
            >
              <Radio value={1}>___按比例___</Radio>
              <Radio value={2}>___固定金额___</Radio>
            </RadioGroup>
            <InputNumber
              style={{width: 160}}
              value={internationalHotel}
              formatter={value => this.formatter(value, hotelBuffer.internationalOrderBufferType)}
              parser={value => this.parser(value, hotelBuffer.internationalOrderBufferType)}
              onChange={(value) => this.onInputNumberChange(value, 'internationalHotel')}
            />
          </div>
          <br/><br/>
          <Button type='primary' onClick={this.onSaveSetting}>___保存配置___</Button>
        </Spin>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    company: state.login.company
  }
}

export default connect(mapStateToProps)(BufferSet);
